<!-- 查看文件源码 -->
<template>
  <el-tabs v-model="activeName">
    <el-tab-pane v-for="item in tabList" :label="item.label" :name="item.value">
      <el-input v-model="item.fileContent" :autosize="true" type="textarea" spellcheck="false" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getFileContentApi, getSubfileNameApi } from '@/api/index';

const router = useRouter();

const activeName = ref('index.vue');
const tabList = ref([
  {
    label: 'index.vue',
    value: 'index.vue',
    fileContent: '暂无数据',
  },
]);

//获取文件内容
const getFileData = (url: string): Promise<string> => {
  return new Promise((resolve) => {
    if (url) {
      getFileContentApi({ url }).then((res: any) => {
        if (res.code === 200) {
          const content = res.result;
          resolve(content);
        }
      });
    }
  });
};

//获取子文件名称
const getSubfileData = (folderUrl) => {
  if (folderUrl) {
    getSubfileNameApi({ folderUrl }).then((res: any) => {
      if (res.code === 200) {
        const filesName = res.result.filter((item) => item !== 'index.vue');
        const filesObjList = filesName.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
        tabList.value = [
          {
            label: 'index.vue',
            value: 'index.vue',
            fileContent: '暂无数据',
          },
          ...filesObjList,
        ];

        //查询子文件内容
        tabList.value.forEach(async (tab) => {
          let url = `${folderUrl}/${tab.value}`;
          tab.fileContent = await getFileData(url);
        });
      }
    });
  }
};

watch(
  () => router.currentRoute.value.path,
  (toPath) => {
    getSubfileData(toPath);
  },
);
</script>
<style lang="scss" scoped>
.text-content {
  white-space: pre-wrap;
  text-align: left;
}
</style>
